<template name="支付通道网络">
  <div class="page">
    <a-table
      ref="table"
      :columns="columns"
      :dataSource="dataSource"
      :rowKey="
        (record, index) => {
          return index;
        }
      "
      :loading="loading"
      :pagination="pagination"
      @change="search"
      @showSizeChange="search"
      :scroll="{ x: 600 }"
    >
      <template slot="operation" slot-scope="text, record">
        <!--<a-icon v-hasPermission="['payChannelNet:edit']" type="setting" theme="twoTone" twoToneColor="#4a9ff5"
                @click="edit(record)" title="切换"></a-icon>-->&nbsp;

        <a-popconfirm
          title="确定要切换吗？"
          @confirm="edit(record)"
          v-if="record.supportFlag !== 'N'"
        >
          <a class="text-btn danger">切换</a>
        </a-popconfirm>
        <!-- <a class="text-btn" @click="view(record)">查看</a>-->
      </template>
    </a-table>

    <a-modal
      v-model="modalVisible"
      :title="modalTitle"
      width="1050px"
      @ok="submit"
      :maskClosable="false"
      :footer="isHideFoot?null:undefined"
    >
      <pay-channel-net-operation ref="modalForm"/>
    </a-modal>
  </div>
</template>

<script>
import PayChannelNetOperation from "./PayChannelNetOperation";

export default {
  name: "PayChannelNet",
  components: { PayChannelNetOperation },
  data() {
    return {
      query: {
        txnNum: "",
        bizProdCode: "",
      },
      beanInfo: {},
      modalVisible: false,
      modalTitle: "",
      operationType: "view",
      loading: false,
      pagination: {
        pageSizeOptions: ["10", "20", "30", "40", "100"],
        defaultCurrent: 1,
        defaultPageSize: 10,
        showQuickJumper: true,
        showSizeChanger: true,
        showTotal: (total, range) =>
          `显示 ${range[0]} ~ ${range[1]} 条记录，共 ${total} 条记录`,
      },
      columns: [
        {
          title: "支付通道",
          dataIndex: "paramKey",
          fixed: "left",
          width: 400,
          customRender: (text) => {
            return text ? { "aliPaySwitchFlag": "支付宝直连"} [text] : "";
          },
        },
        {
          title: "网络类型",
          dataIndex: "paramValue",
          width: 400,
          customRender: (text) => {
            return text ? {
              "ZX": "专线",
              "NET": "互联网",
            }  [text] : "";
          },
        },
        {
          title: "操作",
          fixed: "right",
          scopedSlots: { customRender: "operation" },
        },
      ],
      dataSource: [],
    };
  },
  methods: {
    async search(e) {
      e && e.preventDefault && e.preventDefault();
      try {
        const res = await this.$get("/admin/igas/PayChannelNet/list", {
          pageNum: this.pagination.defaultCurrent,
          pageSize: this.pagination.defaultPageSize,
        });
        this.dataSource = res.data.rows;
        this.$set(this.pagination, "total", +res.data.total);
      } catch (e) {
        console.error(e);
      }
    },
    openModal(type = "edit", beanInfo) {
      this.modalTitle = {
        edit: "支付通道网络切换",
      }[type];
      this.modalVisible = true;
      this.$nextTick(() => {
        this.$refs.modalForm.setOperatorType(type);
        if (type === "edit") {
          this.$refs.modalForm.setBeanInfo(beanInfo);
        }
        this.$refs.modalForm.resetFields();
      });
    },
    async submit() {
      const res = await this.$refs.modalForm.submit();
      if (res) {
        this.modalVisible = false;
        this.pagination.defaultCurrent = 1;
        await this.search();
      }
    },
    edit(record) {
      this.openModal("edit", record);
    },
  },
  mounted() {
    this.search();
  },
};
</script>
<style lang="less" scoped>
@import "../../../../../static/less/Common";
</style>
